<template>
  <div>
    <Button v-if="!show" @click="show = true" type="success">
      <Icon type="search"></Icon>
      查询</Button>
    <Table border :columns="columns" :data="searchList"  v-else></Table>
  </div>
</template>
<script>
export default {
  name: 'filter-mask',
  props: {
    columns: {
      type: Array,
      required: true
    },
  },
  data() {
    return {
      searchList: [{}],
      show: false,
    }
  },
  methods: {

  },
  mounted() {
    this.columns.forEach((item) => {
      item.render = (h, params) => {
        return h('div', {
          attrs: {
            'contentEditable': true
          },
          on: {
            'blur': (e) => {
              this.searchList[params.index][params.column.key] = e.target.textContent;
            }
          }
        }, params.row[params.column.key])
      }
    })
    this.columns.push({
      title: '.',
      align: 'center',
      renderHeader: (h) => {
        return h('i-button', {
          props: {
            type: 'info'
          },
          on: {
            'click': (e) => {
              this.show = false;
            }
          }
        }, [
          h('Icon', {
            props: {
              type: 'arrow-up-a'
            }
          })
        , '收起'])
      },
      render: (h, params) => {
        return h('div', [
          h('i-button', {
            props: {
              type: 'success',
            },
            on: {
              'click': (e) => {
                this.$emit('on-value', this.searchList[0]);
              }
            }
          }, [
            h('Icon', {
              props: {
                type: 'search'
              }
            })
          ,'搜索']),
          h('i-button', {
            props: {
              type: 'warning',
            },
            on: {
              'click': (e) => {
                this.$emit('on-refresh');
                this.searchList.splice(0, 1, {});
                this.$forceUpdate();
              }
            }
          },[
            h('Icon', {
              props: {
                type: 'refresh'
              }
            })
          , '重置'])
        ])
      }
    })
  }
}
</script> 
<style>
  .filter-mask {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
    /* transform: translate(0, '-100%'); */
  }
  th .ivu-table-cell {
    display: block !important;
  }
</style>